import { Chip } from '@mui/material';
import { request, useModel, useRequest } from '@umijs/max';
import { Col, Row } from 'antd';
import { useState } from 'react';

export const Filter = () => {
  const { setList } = useModel('list');

  const items = [
    {
      label: '套件',
      value: 'Kit',
    },
  ];
  const { run } = useRequest(
    async (data) => {
      return request('/api/kits', {
        method: 'get',
        params: {
          type: 'Kit',
          pageSize: 30,
          ...data,
        },
      });
    },
    {
      onSuccess: (data) => {
        setList(data.rows || []);
      },
    },
  );

  const [active, setActive] = useState('Kit');

  const handleClick = (value: string) => {
    setActive(value);
    run({
      type: value,
    });
  };

  return (
    <Row style={{ padding: '10px 20px' }} gutter={[10, 10]}>
      {items.map((item) => (
        <Col key={item.value}>
          <Chip
            clickable
            color={item.value === active ? 'secondary' : undefined}
            label={item.label}
            sx={{ minWidth: '80px' }}
            onClick={() => handleClick(item.value)}
          />
        </Col>
      ))}
    </Row>
  );
};
